<template>
	<view class="container">
		<view class="top">
			<view class="top_head">
				<text>设置路由</text>
				<view class="btn" v-if="1 == 2">
					<button @click="add" :disabled="disabled">添加途径点</button>
				</view>
			</view>
			<view class="start">
				<text>起点：</text>
				<view class="start_in">
					<text>{{cardata.start_name}}</text>
					<image src="../../static/img/jiantou.png" mode=""></image>
				</view>
			</view>
			<view class="center">
				<view class="car_center" v-for="(item,index) in list" :key="index">
					<text>途径：</text>
					<view class="center_in">
						<view class="center_del">
							<text>{{item.outlet_name}}</text>
							<view class="img" @click="del" v-if="isshare==false">
								<image src="../../static/img/del.png" mode=""></image>
							</view>
						</view>
						<view class="center_bottom">
							<image src="../../static/img/jiantou.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="end">
				<text>终点：</text>
				<view class="end_in">
					<text>{{cardata.end_name}}</text>
				</view>
			</view>
		</view>
		<view class="body">
			<text>档口信息</text>
			<view class="body_name">
				<text>{{cardata.muzzle_name}}</text>
			</view>
		</view>

		<!-- 		<view class="foot">
			<text>保证金</text>
			<view class="foot_name">
				<u--input placeholder="请输入保证金" border="bottom" clearable type='digit' color="#1890FF"
					:disabled="isshare" v-model="value"></u--input>
			</view>
		</view> -->

		<!-- 		<view class="money">
			<text>垫资金额</text>
			<view class="money_name">
				<u--input placeholder="请输入垫资金额" border="bottom" clearable :disabled="isshare" type='digit'
					color="#1890FF" v-model="value2"></u--input>
			</view>
		</view> -->

		<view class="money">
			<text>大车费</text>
			<view class="money_name">
				<u--input placeholder="请输入运费" border="bottom" clearable :disabled="isshare" type='digit' color="#1890FF"
					v-model="value1"></u--input>
			</view>
		</view>
		<view class="submit">
			<button v-if="!isshare" @click="postshare()">创建分享信息</button>
			<button v-else open-type="share">确认分享</button>
			<!-- <button open-type="share">确认分享</button> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '0',
				value1: '0',
				value2: '0',
				isshare: false,
				disabled: false,
				shareid: '',
				startline: '',
				testdata: '',
				startline: [],
				list: [],
				json_line: [{ outlet_id: 0, outlet_name: "" }],
				cardata: {
					start_outlet_id: '',
					start_name: '',
					end_outlet_id: '',
					end_name: '',
					muzzle_name: '',
					line_id: '',
					mid: ''
				},
				truck: {}, // 当前操作的车次
			}
		},
		onLoad(options) {
			console.log(options)
			this.cardata = JSON.parse(options.cardata)
			this.truck = JSON.parse(options.truck)
		},
		onShow() {
			let that = this
			uni.$on('updateData', (data) => {
				that.testdata = JSON.parse(data)
				if (that.list.length < 2) {
					that.list.push(that.testdata)
				}
				console.log(that.list)
				// const params = 'id:'+data.id+', name:'+data.name;
				console.log('监听到事件来自 updateData ，携带参数为：' + data);
			})
		},
		onUnload() {
			uni.$off("updateData")
		},
		onShareAppMessage(res) {
			console.log('分享来源 = ', res.from);
			let fee = { bond: this.value, advance_amount: this.value2, freight: this.value1 }
			// 优化传递的数据 防止数据量过大造成分享失败
			let newTruck = {
				transferid: this.truck.transferid,
				addrfrom: this.truck.addrfrom,
				addrto: this.truck.addrto,
				addrfromnode: this.truck.addrfromnode,
			}
			if (!this.value1) {
				this.$toast('请输入运费')
			} else {
				return {
					title: '确认接单',
					path: `/pages/confirmorder/confirmorder?shareid=${this.shareid}&truck=${JSON.stringify(newTruck)}&fee=${JSON.stringify(fee)}`,
				}
			}
		},
		methods: {

			// 提交分享
			postshare() {
				if (this.value == '') {
					this.$toast("请输入保证金")
					return false
				}
				// if (this.value1 == '') {
				// 	this.$toast('请输入运费')
				// 	return false
				// }
				if (this.value1 == '' || this.value1 <= 0) {
					this.$toast('请输入运费')
					return false
				}
				if (this.value2 == '') {
					this.$toast('请输入垫资金额')
					return false
				}
				let line = []
				this.list.forEach(item => {
					return line.push({ outlet_id: item.outlet_id, outlet_name: item.outlet_name })
				})
				console.log(line)
				line.unshift({ outlet_id: this.cardata.start_outlet_id, outlet_name: this.cardata.start_name })
				line.push({ outlet_id: this.cardata.end_outlet_id, outlet_name: this.cardata.end_name })

				// 生成分享信息
				uni.showLoading({ title: '提交中', mask: false })
				this.$share({
					bond: this.value,
					freight: this.value1,
					transferid: this.truck.transferid,
					// advance_amount: this.value2,
					// muzzle_id: this.cardata.mid,
					// line_id: this.cardata.line_id,
					// json_line: JSON.stringify(line)
				}).then(res => {
					// this.$toast(res.msg)
					uni.hideLoading()
					if (res.code == 1) {
						uni.showModal({
							title: '提示',
							content: '车次信息创建成功！请点击『确认分享』按钮分享给司机',
							confirmText: '明白了',
							showCancel: false,
							success: res => {
								if (res.confirm) {
									console.log('创建分享信息成功,用户点击确定')
								}
							}
						})
						this.shareid = res.data.share_id
						this.isshare = true
					}
				})

			},
			//添加途径
			add() {
				console.log(this.list)
				if (this.list.length == 2) {
					this.$toast('最多添加两个途径点')
					return false
				} else {
					this.disabled = false
					uni.navigateTo({
						url: "/pages/tujing/tujing?sid=" + this.cardata.start_outlet_id + "&eid=" + this.cardata
							.end_outlet_id
					})
				}
			},
			//删除途径点
			del(index) {
				this.list.splice(index, 1)
				this.$toast('删除成功')
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding-bottom: 36rpx;

		.top {
			padding: 36rpx 36rpx;
			background-color: #fff;

			.top_head {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				margin-bottom: 40rpx;

				button {
					background: #1890FF;
					height: 68rpx;
					border-radius: 8rpx;
					font-size: 30rpx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				text {
					font-size: 30rpx;
					color: #000;
					font-weight: 600;
				}
			}

			.start {
				display: flex;

				text {
					font-size: 30rpx;
					color: #000;
					font-weight: 600;
				}

				.start_in {
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 28rpx;
						height: 38rpx;
						margin: 20rpx;
					}

					text {
						font-size: 30rpx;
						color: #1890FF;
						font-weight: 600;
					}
				}
			}

			.end {
				display: flex;

				text {
					font-size: 30rpx;
					color: #000;
					font-weight: 600;
				}

				.end_in {
					display: flex;
					flex-direction: column;
					align-items: center;

					text {
						font-size: 30rpx;
						color: #1890FF;
						font-weight: 600;
					}
				}
			}

			.center {
				display: flex;
				flex-direction: column;

				.car_center {
					display: flex;

					text {
						font-size: 30rpx;
						color: #000;
						font-weight: 600;
					}

					.center_in {
						// width: 100%;
						display: flex;
						flex-direction: column;

						// align-items: center;
						.center_del {
							width: 400rpx;
							display: flex;
							justify-content: space-between;

							// align-items: center;
							text {
								font-size: 30rpx;
								color: #1890FF;
								font-weight: 600;
							}

							.img {
								width: 32rpx;
								height: 38rpx;

								image {
									width: 32rpx;
									height: 38rpx;
									// margin-top: 4rpx;
									margin-top: 0;
								}
							}
						}

						.center_bottom {
							display: flex;
							margin-left: 20rpx;

							image {
								width: 28rpx;
								height: 38rpx;
								margin-top: 46rpx;
								margin-bottom: 46rpx;
								align-items: flex-start;
							}
						}
					}
				}
			}
		}

		.body {
			margin: 16rpx 0 0 0;
			background: #fff;
			padding: 36rpx 36rpx;
			display: flex;
			flex-direction: column;

			text {
				font-size: 30rpx;
				color: #000;
				font-weight: 600;
			}

			.body_name {
				margin: 16rpx 0 0 0;

				text {
					font-size: 30rpx;
					color: #1890FF;
					font-weight: 500;
				}
			}
		}

		.foot {
			margin: 16rpx 0 0 0;
			background: #fff;
			padding: 40rpx 40rpx;
			display: flex;
			flex-direction: column;

			text {
				font-size: 30rpx;
				color: #000;
				font-weight: 600;
			}

			.foot_name {
				margin: 16rpx 0 0 0;
			}
		}

		.money {
			margin: 16rpx 0 0 0;
			background: #fff;
			padding: 36rpx 36rpx;
			display: flex;
			flex-direction: column;

			text {
				font-size: 30rpx;
				color: #000;
				font-weight: 600;
			}

			.money_name {
				margin: 16rpx 0 0 0;
			}
		}

		.submit {
			margin: 40rpx 0 0 0;

			button {
				width: 600rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: #1890FF;

				box-shadow: 0px 0px 4px 0px rgba(204, 204, 204, 0.5);
				border-radius: 50rpx;
				color: #fff;
				font-size: 30rpx;
			}
		}
	}
</style>